import React from "react";
import {hashHistory} from 'react-router';
import Relay from "react-relay";
import { Upload, Icon,message } from 'antd';
import {
    Button,Input,Modal,
    fileFormatTest,pingImg
} from 'fly';
import Config from "../../../util/Config"

export default class AddPictureModal extends React.Component {
    state = {
        previewVisible: false,
        previewImage: '',
        fileList: this.props.fileList?this.props.fileList:[],
    };
    constructor(props){
        super(props);
        this.handleChangeFlag = true;
        this.addimgUrl = Config.qiuniu;
    }
    componentWillReceiveProps(props){
        // console.log(props);
        if(props){
            this.setState({
                fileList: props.fileList?props.fileList:[],
            })
        }
    }
    //验证图片
    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    clear(){
        // console.log(this.state.fileList);
        this.setState({
            fileList:[],
        });
    }
    //modal取消
    handleCancel = () => this.setState({ previewVisible: false })
    //预览-回调
    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    };
    //删除-回调
    handleRemove(file){
        // console.log(file);
        if(file && (file.status === "uploading")){
            message.warning("当前图片正在上传中");
            return;
        }
        // console.log(123);
    }
    //上传文件改变时的状态
    handleChange = ({ file,fileList,event }) => {
        //console.log(file.status);
        this.handleChangeFlag = this.props.handleChangeFlag;
        if(!this.handleChangeFlag)return;
        // 在uploading 当中显示进度条
        if(file.status === "uploading"){
            // debugger
            if(file.type.indexOf("image") !== -1){
                this.getBase64(file.originFileObj,(result)=>{
                    pingImg(result,(status)=>{
                        if(status === "responded"){
                            this.setState({ fileList });
                        }else{
                            message.error("上传失败或不支持的类型");
                            this.handleChangeFlag = false;
                            return;
                        }
                    });
                });
            }else{
                this.setState({ fileList });
            }
        }
        //上传成功
        if(file.status === "done"){
            // debugger
            this.setState({ fileList });
            this.props.addFileImg(fileList[0],this.props.index);
        }
        //上传失败
        if(file.status === "error"){
            message.error("上传图片失败，请重试");
            return
        }

        // 删除图片
        if(file.status === "removed"){
            // console.log("删除图片");
            let obj = this.state.fileList[0];
            if(obj&&this.state.fileList[0].status === "uploading"){
                message.warning("当前图片正在上传中");
                return;
            }
            this.setState({ fileList });
            this.props._picRemove(this.props.index);
        }
    };
    //上传参数及返回参数
    updataFile(file,index,id){
        let {token} = this.props;
        const date = new Date().getTime();
        return {file:file,token:token,key:`PackStep_${date}`}
    }

    render() {
        const {uploadPlugin} = this.props;
        const { previewVisible, previewImage, fileList } = this.state;
        // console.log(fileList);
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">上传图片</div>
            </div>
        );
        return (
            <div className="clearfix upload_box">
                <Upload
                    {...uploadPlugin}
                    listType="picture-card"
                    defaultFileList={fileList}
                    data={this.updataFile.bind(this)}
                    onPreview={this.handlePreview.bind(this)}
                    onRemove={this.handleRemove.bind(this)}
                    onChange={this.handleChange.bind(this)}
                >
                    {fileList.length >= 1 ? null : uploadButton}
                </Upload>
                <Modal
                    visible={previewVisible}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </div>
        );
    }
}